<template>
  <div id="tablecom" ref="height_page">
    <div class="form-block" ref="height_option">
      <!-- 添加分类 -->
      <!-- <el-button size="mini" type="primary" icon="el-icon-plus" title="添加" 
        @click="addClass"
      >添加</el-button> -->
      <!-- 删除选中 -->
      <!-- <el-button 
        size="mini" type="danger" icon="el-icon-delete" title="删除" 
        :disabled="deleteReadOnly"
        @click="deleteClass"
      >删除</el-button> -->
      <!-- 搜索分类输入框 -->
      <el-autocomplete
        class="inline-input search-input"
        prefix-icon="el-icon-search"
        clearable
        v-model="searchinput"
        :fetch-suggestions="querySearch"
        size="small"
        placeholder="请输入内容"
        :trigger-on-focus="true"
        @select="handleSelectInput"
      ></el-autocomplete>
    </div>
    <div ref="height_table" class="form-component__scroll">
      
      <!-- :default-sort 设置默认排序 height="600" -->
      <el-table ref="multipleTable" :height="tableHeight" :data="classList" tooltip-effect="dark" style="width: 100%" :default-sort = "{prop: 'date', order: 'descending'}" 
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="序号" sortable width="80"></el-table-column>
        <el-table-column prop="name" label="用户名称" width="100"></el-table-column>
        <el-table-column label="类型图标" width="100">
          <template slot-scope="scope">
            <!-- {{scope.row.parent_icon}} -->
            <img :src="scope.row.avatar" width="30" height="30" class="head_pic"/>
          </template>
        </el-table-column>
        <el-table-column prop="add_time" label="加入日期" sortable width="150"></el-table-column>
        <el-table-column prop="last_login_time" label="最后登录时间" sortable></el-table-column>
        <el-table-column label="状态" width="100">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="1" :inactive-value="0"
              active-color="#13ce66" inactive-color="#ff4949"
              >
            </el-switch>
            {{ scope.row.status==1?'启用':'禁用' }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
    <div ref="height_paging">
      <paging :formconfig="formConfig" v-on:handle-current="listenCurrent" v-on:handle-size="listenSize" ref="mychild"></paging>
    </div>
  </div>
</template>

<script>
import paging from "@/components/paging"
// import Mock from '../mock'
import { userList } from "../api/api";

export default {
  name: "tablecom",
  data() {
    return {
      // 请求接口的验证ID
      sessionId: null,
      // 分页器配置
      restaurants: [],
      searchinput: "",
      formConfig: {
        current: 1,
        length: 299,
        pagesizes: [20, 50, 100, 200],
        pagesize: 50,
        singlePage:false,
      },
      // 选中的列表值
      multipleSelection: [],
      // 表格高度
      tableHeight: 600
    };
  },
  methods: {
    // 搜索输入框主函数
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      // console.log(restaurants)
      console.log(results)
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    // 搜索输入框模拟数据
    loadAll() {
      return [
        { "value": "Mderci Paul时刻了", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },
        { "value": "Mdfsi发的时刻了", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },
        { "value": "M山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },
        { "value": "M山王（西百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },
        { "value": "M山", "address": "上海市普陀区棕榈路" }
      ];
    },
    // 搜索输入框 显示数据点击返回
    handleSelectInput(item) {
      
      console.log(item);
    },
    // 分页 数量返回
    listenCurrent(something){
      this.pageNum = something;
      // this._synchron();
      console.log(this.pageNum);
    },
    // 分页页码改变时的返回
    listenSize(something){
      this.pageNum = something;
      // this._synchron();
      console.log(this.pageNum);
    },
    // 表格选中返回
    handleSelectionChange(val) {
      this.multipleSelection = val;
      if (this.multipleSelection.length>0) {
        this.deleteReadOnly = false
      } else {
        this.deleteReadOnly = true
      }
      console.log(this.multipleSelection);
    },
    // 获取时间戳
    getNowTime(){
      let that = this; //声明一个变量指向Vue实例this，保证作用域一致
      let nowTime = new Date();
      // 时间戳
      let timestamp = nowTime.getTime();
      // 标准时间
      let time = that.computeNowStandardTime(timestamp);
      // console.log(timestamp/1000,time);
      // 后台时间戳和前端相比差1000倍
      return (timestamp/1000)
    },
    // 获取 YY-MM-DD hh:mm 时间
    computeNowStandardTime(params){
      let that = this; //声明一个变量指向Vue实例this，保证作用域一致
      let nowTime = new Date(params);
      let YY = that.appendZero(nowTime.getFullYear());//年
      let MM = that.appendZero(nowTime.getMonth()+1);//月
      let DD = that.appendZero(nowTime.getDate());//日
      let hh = that.appendZero(nowTime.getHours());//时
      let mm = that.appendZero(nowTime.getMinutes());//分
      let ss = that.appendZero(nowTime.getSeconds());//秒
      // 时间格式
      let time = YY +"-"+ MM +"-"+ DD +" "+ hh +":"+ mm;
      // let time = YY +"-"+ MM +"-"+ DD +" "+ hh +":"+ mm +":"+ ss;
      return time
    },
    //过滤加0
    appendZero(obj) {
      if (obj < 10) {
      return "0" + obj;
      } else {
      return obj;
      }
    },
    // 获取表格高度
    getTableHe(){
      // || this.$refs.height_option!=undefined || this.$refs.height_paging!=undefined
      if (this.$refs.height_page!=undefined) {
        var pagetHe = this.$refs.height_page.offsetHeight;
        var optionHe = this.$refs.height_option.offsetHeight;
        var pagingHe = this.$refs.height_paging.offsetHeight;
        this.tableHeight = pagetHe - optionHe - pagingHe;
        // console.log(pagetHe,optionHe,pagingHe);
      }
    }
  },
  mounted() {
    let that = this;
    this.$nextTick(()=>{ // 页面渲染完成后的回调
      // 搜索模拟数据
      this.restaurants = this.loadAll();
      // 表格高度
      this.getTableHe();
      setTimeout(() => { this.getTableHe(); }, 1000);
    })
    window.addEventListener('resize',this.getTableHe,false)
  },
  created() {
    var that = this;
    // 获取参数
    // let ParamsKey = that.$route.params.key;
    // console.log(ParamsKey);
    // 获取请求接口的ID
    that.sessionId = sessionStorage.getItem("access-token");
    console.log(that.sessionId);
    let paramsType = {
      sessionId: that.sessionId
    }
    // 提供模拟的请求接口
    // Mock.datatype();
    // 获取列表数据
    userList().then(data => {
      console.log(data)
      let that = this;
      let { msg, code } = data;
      if (code == "200") {
        let dates = data.data;
        console.log(dates)
        this.classList = dates;
        this.formConfig.length = this.classList.length;
        this.formConfig.singlePage = this.classList.length<=20

        let classDate = that.classList;
        for (let index = 0; index < classDate.length; index++) {
          const element = classDate[index];
          element.add_time = that.computeNowStandardTime(element.add_time*1000);
          element.last_login_time = that.computeNowStandardTime(element.last_login_time*1000);
        }
      } else {
        this.$message({
          message: msg,
          type: "error"
        });
      }
    });
  },
  computed:{
    
  },
  components:{
    "paging": paging,
  }
};
</script>
